<template>
  <div class="mobile clearfix">
    <MobileHeader />
    <div class="article-list-mobile">
      <div class="bread clearfix">
        <span>您现在的位置：</span>
        <label v-for="(list1, index) in date1.channelList" :key="index">{{ list1.channelName }} 列表
        </label>
      </div>
      <ul class="list clearfix" v-if="date1.displayForm == '1'">
        <li v-for="(item, index) in date1.ipage.records" :key="index" @click="jump(item.id)">
          <h3 title="" class="text-wid">
            <a target="_blank">{{ item.title }}</a>
          </h3>
          <p class="p" style="word-wrap: break-word;">
            {{ item.description }}</p>
          <p class="date">{{ item.releaseDate }}</p>
        </li>
      </ul>

      <div class="page-list clearfix">
        <a @click="pagination($event, date1.ipage.current - 1)">上页</a>
        &nbsp;
        {{ date1.ipage.current || 1 }}
        &nbsp;
        <a @click="pagination($event, date1.ipage.current + 1)">下页</a>
        &nbsp;
        共{{ date1.ipage.pages || 1 }}页
        
      </div>
    </div>

    <div class="r-top rad5" @click="$router.go(-1)">
      <i class="iconfont icon-fanhuidingbu"></i>
      <a>返回上级</a>
    </div>

    <MobileFooter />
  </div>
</template>

<script>

import MobileHeader from './MobileHeader.vue'
import MobileFooter from "./MobileFooter";
import _http from "../httpService";

export default {
  name: "HospitalSummedup",
  components: {
    MobileHeader,
    MobileFooter
  },
  data() {
    return {
      pageNo: 1,
      pages: 1,
      pageSize: 10,
      date1: {
        ipage: {},
        channelName: "",
        channelNameEn: "",
        channelContent: "",
      },
      dataList: [],
      isDisable: false,
      name: "",
      mobile: "",
      content: "",
    };
  },

  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0, 20) + '...'
      }
      return value
    }
  },

  methods: {
    jump: function (id) {
      this.$router.push({ path: "/MobileArticle/" + id });
    },
    pagination: function (e, pageNo) {
      this.pageNo = pageNo
      _http.get("/content/jcContent/listArticle?channelCode=" + this.$route.query.channelCode + "&pageNo=" + pageNo +
        "&pageSize=" + this.pageSize
      )
        .then((resp) => {
          if (resp.data.success) {
            this.date1 = resp.data.result;
          }
        })
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    },
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route() {
      _http.get("/content/jcContent/listArticle?channelCode=" +
        this.$route.query.channelCode +
        "&pageNo=" +
        this.pageNo +
        "&pageSize=" +
        this.pageSize
      )
        .then((resp) => {
          if (resp.data.success) {
            this.date1 = resp.data.result;
          }
        })
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    },
    immediate: true,
  },
  created() {
    _http.get("/content/jcContent/listArticle?channelCode=" +
      this.$route.query.channelCode +
      "&pageNo=" +
      this.pageNo +
      "&pageSize=" +
      this.pageSize
    )
      .then((resp) => {
        if (resp.data.success) {
          this.date1 = resp.data.result;
        }
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  }
}
</script>

<style scoped></style>
